<template>
  <div class="home">
    <div class="container">
      <div class="card">
        <h1>🎉 欢迎使用 Vue3 + TypeScript + Vite 项目</h1>
        <p class="subtitle">一个现代化的前端开发栈</p>
        
        <div class="features">
          <div class="feature-item">
            <h3>⚡ Vite</h3>
            <p>极速的开发体验和构建工具</p>
          </div>
          <div class="feature-item">
            <h3>🎨 Vue 3</h3>
            <p>渐进式 JavaScript 框架</p>
          </div>
          <div class="feature-item">
            <h3>📘 TypeScript</h3>
            <p>类型安全的 JavaScript</p>
          </div>
          <div class="feature-item">
            <h3>🌐 Axios</h3>
            <p>强大的 HTTP 客户端</p>
          </div>
        </div>

        <div class="cta">
          <button class="button" @click="goToApiDemo">查看 API Demo</button>
          <button class="button secondary" @click="goToAbout">了解更多</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { onMounted } from 'vue'
import { getApiList } from '@/api/apiService'
import { getScreenList } from '@/api/screenService'

const router = useRouter()

onMounted(async () => {
  const res = await getApiList()
  console.log('res', res)

  const screenRes = await getScreenList()
  console.log('screenRes', screenRes)
})

const goToApiDemo = () => {
  router.push('/api-demo')
}

const goToAbout = () => {
  router.push('/about')
}
</script>

<style scoped>
.home {
  padding: 2rem 0;
  min-height: calc(100vh - 100px);
  display: flex;
  align-items: center;
}

.card {
  text-align: center;
}

h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.subtitle {
  font-size: 1.2rem;
  color: #666;
  margin-bottom: 3rem;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.feature-item {
  padding: 1.5rem;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 8px;
  transition: transform 0.3s;
}

.feature-item:hover {
  transform: translateY(-5px);
}

.feature-item h3 {
  margin-bottom: 0.5rem;
  color: #667eea;
}

.cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.button.secondary {
  background: white;
  color: #667eea;
  border: 2px solid #667eea;
}

.button.secondary:hover {
  background: #667eea;
  color: white;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
</style>

